//1. 引入路由和Vue
import Vue from "vue";
import VueRouter from "vue-router";

//2. 引入路由组件
const Home = () => import("../pages/Home");
const Login = () => import("../pages/Login");
const News = () => import("../pages/Home/News");
const Play = () => import("../pages/Home/Play");
const Music = () => import("../pages/Home/Music");
const MusicItem = () => import("../pages/Home/Music/Item");
const NewsItem = () => import("../pages/Home/News/Item");

//2. 使用VueRouter这个插件
Vue.use(VueRouter);

//重写push
//保留原始push
const oldPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (
  location,
  onComplete = () => {},
  onAbort = () => {}
) {
  oldPush.call(this, location, onComplete, onAbort);
};

//重写replace和重写push一致

//3. 创建路由对象
const router = new VueRouter({
  mode: "history",
  //路由表配置
  routes: [
    //初始路由重定向
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: Home,
      // name: "home",
      //设置默认子路由-方式2
      // redirect: "/home/news",
      children: [
        //设置默认子路由-方式1
        {
          path: "",
          redirect: "news",
        },
        {
          path: "news",
          component: News,
          name: "news",
          meta: {
            title: "新闻列表",
            icon: "新闻的图标",
          },
          children: [
            {
              path: "basketball/:name/:price?",
              name: "basketball",
              component: NewsItem,
              props: {
                a: 1,
                b: 2,
              },
            },
            {
              path: "money/:name/:price?",
              name: "money",
              component: NewsItem,
              props: true,
            },
            {
              path: "study/:name/:price?",
              name: "study",
              component: NewsItem,
              props: ($route) => {
                return {
                  ...$route.params,
                  a: 100,
                  b: 200,
                };
              },
            },
          ],
        },
        {
          path: "play",
          component: Play,
          name: "play",
          meta: {
            title: "游戏列表",
            icon: "游戏的图标",
          },
        },
        {
          path: "music",
          component: Music,
          name: "music",
          meta: {
            title: "音乐列表",
            icon: "音乐的图标",
          },
          children: [
            {
              path: "jay",
              name: "JAY",
              component: MusicItem,
              beforeEnter(to, from, next) {
                console.log("jay的路由独享守卫");
                next();
              },
            },
            {
              path: "jj",
              name: "JJ",
              component: MusicItem,
              beforeEnter(to, from, next) {
                console.log("JJ的路由独享守卫");
                next();
              },
            },
            {
              path: "eson",
              name: "ESON",
              component: MusicItem,
              beforeEnter(to, from, next) {
                console.log("ESON的路由独享守卫");
                next();
              },
            },
          ],
        },
      ],
    },
    {
      path: "/Login",
      component: Login,
      name: "login",
    },
  ],
});
//路由全局前置守卫
//大多数守卫都会接受3个参数
//to:要去的地址的路由对象
//from:来的地方的路由对象
//next:守卫结束后,控制当前导航的下一步操作,next()直接方向 next('地址'):导航去某个路由地址
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫");
  next();
});

//全局解析守卫
router.beforeResolve((to, from, next) => {
  console.log("全局解析守卫");
  next();
});
//全局后置钩子
router.afterEach(() => {
  console.log("全局后置钩子");
});

//4. 把创建好的路由对象暴露出去
export default router;
